<template>
  <div class="">
    <div class="mask" @click="close()"></div>
    <div class="paymodal codemodal" v-if="payStep === 1">
      <div class="modal_head">
        <span class="fl">收银台</span>
        <a href="javascript:" @click="close()" class="close iconfont">&#xe616;</a>
      </div>
      <div class="modal_body">
        <div class="tip" v-if="orderInfo.payType === 2">支付宝支付 {{courseData.courseOriginal.toFixed(2)}}元</div>
        <div class="tip" v-else>微信支付 {{courseData.courseOriginal.toFixed(2)}}元</div>
        <div class="code" id="qrcode">
          <canvas id="canvas"></canvas>
        </div>
        <p class="tip2" v-if="orderInfo.payType === 2">请使用支付宝扫描<br> 二维码以完成订单</p>
        <p class="tip2" v-else>请使用微信扫描<br> 二维码以完成订单</p>
        <div class="tip_panel">
          提示: <br>
          支付成功前请勿手动关闭页面 <br>
          二维码两小时内有效,请及时扫码支付
        </div>
      </div>
    </div>
    <div class="paymodal" v-else-if="payStep === 0">
      <div class="modal_head">
        <span class="fl">收银台</span>
        <a href="javascript:" @click="close()" class="close iconfont">&#xe616;</a>
      </div>
      <div class="modal_body" v-if="courseData">
        
        <table class="table">
          <tr>
            <th>课程名称</th>
            <th>课程价格</th>
          </tr>
          <tr>
            <td width="300">
              <div class="" style="width:320px;">
                <div class="img" v-if="courseData.courseLogo"><img :src="courseData.courseLogo" alt=""></div>
                <div class="name">{{courseData.courseName}}</div>
              </div>
            </td>
            <td class="c_orange">¥{{courseData.courseOriginal.toFixed(2)}}</td>
          </tr>
        </table>
        <div class="remark">
          <label>备注:</label>
          <input type="text" v-model="order.remarkCus" placeholder="请输入你需要的备注!">
        </div>
        <div class="pay_type">
          <input type="radio" id="payType2" name="payType" value="2" v-model="order.payType">
          <label for="payType2" class="pay pay_ali"></label>
          <input type="radio" id="payType1" name="payType" value="1" v-model="order.payType">
          <label for="payType1" class="pay pay_weixin"></label>
        </div>
      </div>
      <div class="modal_foot">
        <button class="solid_btn" @click="submit" :disabled="btntext === '正在提交...'">{{btntext}}</button>
      </div>
    </div>
    <div class="paymodal payrun" v-else-if="payStep === 2">
      <div class="modal_head">
        <span class="fl">收银台</span>
        <a href="javascript:" @click="close()" class="close iconfont">&#xe616;</a>
      </div>
      <div class="modal_body">
        <div class="icon iconfont c_green minIcon">&#xe69f;<span class="c_333 font_14">订单支付成功!</span></div>
        <!-- <div class="tip">支付成功</div> -->
        <div class="center border_b">
          <a class="solid_btn order_btn" v-if="courseData.courseCategory == 1" :href="'/view/'+courseData.id">立即学习</a>
          <a class="solid_btn order_btn" v-else-if="courseData.courseCategory == 2" :href="'/live/detail/'+courseData.id">立即学习</a>
          <a class="solid_btn order_btn" v-else-if="courseData.courseCategory == 3" :href="'/live/bunch/'+courseData.id">立即学习</a>
          <a class="solid_btn order_btn" v-else href="javascript:" @click="reload">确定</a>
          <a class="solid_btn order_btn" target="_blank" href="/account/order">查看订单</a>
        </div>
        <div class="ewm_img" v-if="webInfo && webInfo.weixinXcx">
          <img :src="webInfo.weixinXcx" alt="">
          <p class="mgt10">微信扫码关注小程序</p>
          <p>学习更便捷</p>
        </div>
      </div>
    </div>
    <div class="paymodal payrun" v-else-if="payStep === 3">
      <div class="modal_head">
        <span class="fl">收银台</span>
        <a href="javascript:" @click="close()" class="close iconfont">&#xe616;</a>
      </div>
      <div class="modal_body">
        <div class="icon iconfont c_red">&#xe68c;</div>
        <div class="tip">支付失败</div>
        <div class="center">
          <button class="solid_btn" @click="{payStep = 0}">重新购买</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {orderSave, orderInfo} from '~/api/order.js'
  import QRCode from 'qrcode'
  export default {
    props: {
      data: {
        type: [Object, Array],
        default: null
      },
      no: {
        type: String,
        default: ''
      },
      isCourse: {
        type: Boolean
      }
    },
    data () {
      return {
        isVip: false,
        btntext: '下一步',
        checkPay: false,
        userInfo: this.$store.state.userInfo,
        courseData: '',
        order: {
          channelType: 1,
          courseId: 0,
          payType: 1,
          remarkCus: ''
        },
        orderInfo: null,
        payStep: 0,
        player: null
      }
    },
    mounted () {
      // this.qrcode('weixin://wxpay/bizpayurl?pr=GlkCzqF');
      console.log(this.$router)
      this.order.courseId = this.data.course.id;
      this.courseData = this.data.course;
      console.log(this.courseData)
    },
    methods: {
      reload () {
        window.location.reload();
      },
      close (event) {
        this.checkPay = true;
        this.$emit('hidefun', event);
      },
      sel (cno) {
        this.checkPay = true;
        this.$emit('btnClick', cno)
      },
      qrcode (url) {
        QRCode.toCanvas(document.getElementById('canvas'), url, {
          width: 180,
          height: 180
        }, function (error) {
          if (error) console.error(error)
          console.log('success!')
        })
      },
      startView () {

      },
      submit () {
        let that = this;
        that.btntext = '正在提交...';
        console.log(that.order)
        orderSave(that.order).then(res => {
          res = res.data;
          console.log(res)
          that.btntext = '下一步';
          if (res.code === 200) {
            that.payStep = 1;
            that.orderInfo = res.data;
            this.ocl = setTimeout(function () {
              that.qrcode(res.data.payMessage);
            }, 100);
            that.getOrderInfo(res.data.orderNo)
          } else if (res.code >= 300 && res.code < 400) {
            this.$msgBox({
              content: res.msg,
              isShowCancelBtn: false
            }).then(() => {
              this.$store.dispatch('REDIRECT_LOGIN');
            }).catch(() => {})
          } else {
            this.$msgBox({
              content: res.msg,
              isShowCancelBtn: false
            }).catch(() => {})
          }
        }).catch(() => {
          this.$msgBox({
            content: '提交失败,请重试',
            isShowCancelBtn: false
          })
          that.btntext = '重新提交';
        })
      },
      getOrderInfo (no) {
        let that = this;
        if (this.checkPay) {
          return false;
        }
        orderInfo({orderNo: no}).then(res => {
          res = res.data
          console.log(res)
          if (res.data.orderStatus === 1) {
            setTimeout(function () {
              that.getOrderInfo(no);
            }, 1000);
          } else if (res.data.orderStatus === 2) {
            if (that.order.courseType === 3) {
              this.close();
              this.$msgBox({
                content: '购买成功',
                isShowCancelBtn: false
              }).then(res => {
                window.location.reload();
              }).catch(() => {
                window.location.reload();
              })
            } else {
              that.payStep = 2;
            }
          } else {
            that.payStep = 3;
          }
        })
      }
    }
  }
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.payrun{
  min-height: 180px;
  .modal_body{
    padding: 30px;
    // height: 180px;
  }
  .ewm_img {
    width: 130px;
    display: block;
    margin: 10px auto 0;
    text-align: center;
    img {
      width: 130px;
      height: 130px;
    }
    p {
      line-height: 20px;
    }
  }
  .icon{
    font-size: 80px;
    width: 80px;
    margin: 0 auto;
    text-align: center;
    &.minIcon {
      font-size: 26px;
      width: 160px;
      span {
        position: relative;
        top: -5px;
        padding-left: 6px;
      }
    }
  }
  .order_btn {
    background: #fff;
    border: 1px solid rgb(180, 180, 180);
    color: #999;
    text-decoration: none;
    margin: 30px 5px;
  }
  .tip{
    font-size: 16px;
    text-align: center;
    padding-bottom: 20px;
  }
  .c_green{
    color: #05d005;
  }
}
.codemodal{
  .tip{
    margin: 30px auto 0;
    text-align: center;
    font-size: 16px;
  }
  .code{
    width: 182px;
    height: 182px;
    border: 1px solid #ddd;
    margin: 20px auto;
  }
  .tip2{
    margin: 0 auto;
    width: 200px;
    padding: 13px 0 13px 70px;
    height: 66px;
    line-height: 20px;
    font-size: 14px;
    color: #fff;
    background: url() no-repeat 20px center #445f85;
  }
  .tip_panel{
    margin-top: 20px;
    padding: 20px;
    line-height: 20px;
    border-top: 1px solid #f1f1f1;
  }
}
.paymodal{
  position: fixed;
  left: 50%;
  top: 20%;
  z-index: 999;
  width: 480px;
  margin-left: -240px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  .modal_head{
    line-height: 46px;
    background-color: #f9f9f9;
    text-align: right;
    padding: 0 20px;
    .close{
      font-size: 14px;
    }
  }
  .modal_foot{
    border-top: 1px solid #e7e7eb;
    padding: 20px;
    text-align: center;
  }
  .table{
    width: 100%;
  }
  th{
    line-height: 36px;
    background-color: #f8f8f8;
  }
  td{
    vertical-align: middle;
    padding: 20px;
  }
  .name{
    width: 140px;
    padding-left: 12px;
    font-size: 16px;
  }
  .img{
    display: inline-block;
    width: 120px;
    padding: 0;
  }
  .name{
    display: inline-block;
    vertical-align: top;
  }
  .tabs {
    height: 48px;
    .tab{
      float: left;
      line-height: 46px;
      text-align: center;
      font-size: 16px;
      width: 50%;
    }
    span{
      cursor: default;
      display: inline-block;
      line-height: 46px;
    }
    .on{
      color: #ee7e00;
      span{
        border-bottom: 2px solid #ee7e00;
      }
    }
  }
  .remark{
    padding: 20px;
    overflow: hidden;
    font-size: 14px;
    border-top: 1px solid #f1f1f1;
    input{
      text-indent: .5em;
      height: 22px;
      width: 350px;
      border: none;
    }
  }
  .pay_type{
    padding: 20px;
    overflow: hidden;
    border-top: 1px solid #f1f1f1;
    input{
      display: none;
      &:checked + .pay{
        border-color: #ec7f00;
      }
    }
  }
  .pay{
    width: 218px;
    height: 50px;
    border: 1px solid #fff;
    float: left;
    background-repeat: no-repeat;
    background-position: center center;
    &.pay_ali {
      background-image: url();
    }
    &.pay_weixin {
      background-image: url();
    }
  }
}
</style>
